﻿<!DOCTYPE html>

<html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>DesktopLiveStreaming</title>
    <!--Visual Studio 是最好的IDE。-->
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {
            font-family: 'Microsoft YaHei',Consolas;
        }

        a {
            text-decoration: none;
            color: inherit;
            outline: 0;
            -webkit-transition: .5s ease;
            transition: .5s ease;
        }

        #banner {
            background: black;
            color: #F2F2F2;
            line-height: 1.2em;
            padding: .3em 0;
            box-shadow: 0 5px 10px black;
            text-align: center;
        }

        #content {
            display: block;
            width: 33%;
            height: auto;
            margin: 0 auto;
        }

        #logo {
            padding: 26px 0 0;
        }

        .zerogrid {
            width: 1200px;
            position: relative;
            margin: 0 auto;
            padding: 0px;
        }

            .zerogrid .col-full {
                width: 100%;
            }

            .zerogrid .wrap-col {
                margin: 10px;
            }

        #content {
            padding-top: 39px;
            padding-bottom: 128px;
        }

        #footer {
            background: #441A42;
            color: #ebe1eb;
            font-size: 14px;
            line-height: 16px;
            font-weight: 400;
            padding: 18px 0;
        }

        .zerogrid .row {
            zoom: 1;
        }

        .zerogrid .col-1-3 {
            width: 33.33%;
        }

        .sep-1 {
            border-top: 1px solid #848383;
            padding-bottom: 34px;
        }

        .code {
            background-color: #f5f5f5;
            font-family: Courier New !important;
            font-size: 12px !important;
            border: 1px solid #ccc;
            padding: 5px;
            overflow: auto;
            margin: 5px 0;
            color: #000;
        }
    </style>
</head>

<body>
    <footer id="footer">
        <div class="zerogrid">
            <div class="col-full">
                <div class="wrap-col">
                    我不管 我要见外星人
                </div>
            </div>
        </div>
    </footer>
    <div>
        <header>
            <div class="zerogrid">
                <div class="col-full">
                    <div class="wrap-col">
                        <h1 class="logo">
                            <a href="">DesktopLiveStreaming</a>
                        </h1>
                    </div>
                </div>
            </div>

        </header>

        <section id="content">
            <div class="zerogrid">
                <div class="row">
                    <div class="col-1-3">
                        <div class="wrap-col">
                            <img src="./log.jpg" alt="" class="fleft">
                        </div>
                    </div>
                    <div class="col-2-3">
                        <div class="wrap-col">
                            <h2 id="mpdetitle">Live  Mode </h2>

                            <br>
                            流真实地址:
                            <div class="code">
                                <a href="/live.flv">http://<span id="thishost">host+</span><span id="thisliveurl">/live.flv</span></a>
                            </div>

                            <script>
 
                                var xmlhttp;
                                if (window.XMLHttpRequest) {
                                    xmlhttp = new XMLHttpRequest();
                                }
                                else {
                                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                                }
                                xmlhttp.onreadystatechange = function () {
                                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

                                        var data = JSON.parse(xmlhttp.responseText);
                                        thisliveurl.innerHTML = data.url;
                                        if (data.mode == "hls") {
                                            mpdetitle.innerText = "Live Mode : HLS";
                                            webwatchurl.innerHTML = "/hls_html5.html";
                                            webwatchlink.href = "./hls_html5.html";
                                            document.getElementById("hlsinfo").style.visibility = "visible";
                                        }
                                        else {
                                            mpdetitle.innerText = "Live Mode : HTTP-FLV";
                                            webwatchurl.innerHTML = "/httpflv.html";
                                            webwatchlink.href = "./httpflv.html";
                                            
                                        }

                                    }
                                }
                                window.onload = function () {
                                    thishost.innerHTML = location.host;
                                    thishost1.innerHTML = location.host;
                                    xmlhttp.open("GET", "/getmode", true);
                                    xmlhttp.send();
                                }
                            </script>
                            <span style="font-size:12px">
                                ,粘贴流真实地址后可用手机或者电脑视频播放器(手机可以Vplayer)，以流地址方式打开。
                            </span>
                            <br>
                            <div class="code">
                                <a href="/live.flv">http://<span id="thishost1">host+</span><span id="webwatchurl">/live.flv</span></a>
                            </div>
                            <strong style="color:dodgerblue"><a id="webwatchlink" href="./hls.html"> 点击这里进行网页直播</a></strong>
                            <br>
                            <span id="hlsinfo" style="font-size:12px;visibility:hidden;color:#DA920D">注意：如果当前是hls模式(最好使用谷歌浏览器播放)，当服务器启动后，需要稍微等待5s左右，让首个ts文件生成，才能正常观看。
                            <br/>同时，选择httpflv就会有更低的延迟体验。</span>
                            <script>
                                document.getElementById("hlsinfo").style.visibility = "hidden";
                            </script>
                            <br>
                        </div>
                    </div>
                </div>

            </div>
        </section>
        <div class="footer-top">
            <div class="zerogrid">
                <div class="col-full">
                    <div class="sep-1"></div>
                    <br>

                </div>

            </div>
        </div>
    </div>


</body>
</html>